<template>
<!--转件-->
<Card style="height:800px">
  <Row :gutter="12">
    <!-- <Col span="3">
      <Button type="text" style="font-family:'PingFang SC';font-weight:bold;font-size:16px;">选择用户</Button>
      <Tree :data="treeData" @on-select-change="handleSelectChange"></Tree>
      </Col> -->
    <Col span="24">
    <Row>
      <Col>
      <Form ref="search" inline>
        <FormItem>
          <Select v-model="workGroupCode" @on-change="handleSelectChange" placeholder="工作组" style="width:120px;" clearable>
                <Option v-for="item in groupList" :value="item.groupCode" :key="item.groupCode">{{ item.groupName }}</Option>
            </Select>
        </FormItem>
        <FormItem>
          <Select v-model="userCode" placeholder="用户" style="width:120px;" filterable  clearable>
                <Option v-for="item in userList" :value="item.userCode" :key="item.userCode">{{ item.userName }}</Option>
            </Select>
        </FormItem>
        <FormItem>
          <Select v-model="curNodeCode" style="width:120px" placeholder="节点" clearable @on-change="handNodeChange">
        <Option v-for="item in nodeList" :value="item.nodeCode" :key="item.nodeCode">{{ item.nodeName }}</Option>
      </Select>
        </FormItem>
        <FormItem>
          <Input v-model="custName" placeholder="姓名"></Input>
        </FormItem>
        <FormItem>
          <Input v-model="custCardNo" placeholder="证件号码"></Input>
        </FormItem>
        <FormItem>
          <Date-picker type="date" placeholder="创建时间（起）" v-model="startCreatedDate" format="yyyy-MM-dd"></Date-picker>
        </FormItem>
        <FormItem>
          <Date-picker type="date" placeholder="创建时间（止）" v-model="endCreatedDate" format="yyyy-MM-dd"></Date-picker>
        </FormItem>
        <FormItem>
          <Input v-model="loanId" placeholder="申请书编号" style="width:130px;"></Input>
        </FormItem>
        <FormItem>
          <Select v-model="productCode"  placeholder="产品名称" style="width:130px;">
              <Option v-for="item in productList"   :value="item.productType"  :key="item.productType">{{item.productTypeName }}</Option>
        </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" size="small" @click="submitQuery" style="margin-left: 20px;">查询</Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
    <Row>
      <Col>
      <Table ref="selection" :columns="tabColumns" :data="tabDatas" highlight-row @on-selection-change="checkChange"></Table>
      <Page :total="total" :current="pageNum" :page-size="pageSize" show-elevator show-total @on-change="handlePageChange" style="margin-top: 20px;"></Page>
      </Col>
    </Row>
    <Row>
      <Col>
      <div>&nbsp;</div>
      <span>转派至:
          <Select v-model="assignee" size="small" label-in-value style="width:200px" @on-change="userCodeChange" filterable  clearable>
            <Option v-for="item in users" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </span>
      <Button type="primary" size="small" @click="submitTransfers">转件</Button>
      </Col>
    </Row>
    </Col>
  </Row>
  <Modal v-model="transfersModal" title="转件" :loading="loading" @on-ok="asyncOK">
    <p style="font-size:18px">
      确认要转给员工{{userName}}？
    </p>
  </Modal>
  <Modal v-model="afterTransfer" title="转件结果" :loading="loading" @on-ok="closeModal" width="800">
    <Collapse value="1">
      <Panel name="1">
        转件成功列表
        <p slot="content">
          <Table :columns="successColumns" :data="successData"></Table>
        </p>
      </Panel>
    </Collapse>
    <br>
    <Collapse value="1">
      <Panel name="1">
        转件失败列表
        <p slot="content">
          <Table :columns="failColumns" :data="failData"></Table>
        </p>
      </Panel>
    </Collapse>
  </Modal>
</Card>
</template>

<script>
export default {
  data () {
    return {
      transfersModal: false,
      afterTransfer: false,
      loading: true,
      treeData: [],
      groupList: [], // 角色列表
      groupUsers: {}, // 角色用户关系
      userList: [], // 角色用户列表
      searchRole: null, // 选择的角色
      searchUser: null, // 选择的角色用户
      nodeList: [],
      workGroupCode: null,
      userCode: null,
      custName: null,
      custCardNo: null,
      curNodeCode: null,
      startCreatedDate: null,
      endCreatedDate: null,
      productCode: '', // 产品名称
      loanId: null,
      productList: [],

      tabColumns: [{
        type: 'selection',
        width: 60
      },
      {
        title: '客户姓名',
        key: 'custName'
      },
      {
        title: '申请金额',
        key: 'applyAmount'
      },
      {
        title: '身份证',
        key: 'custCardNo'
      },
      {
        title: '创建时间',
        key: 'createdDate',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.loanModularFormatTime(params.row.createdDate))
          ])
        }
      },
      {
        title: '申请期数',
        key: 'applyTerms'
      },
      {
        title: '渠道',
        key: 'channelName'
      },
      {
        title: '工单处理人',
        key: 'assigneeName'
      },
      {
        title: '工单节点',
        key: 'curNodeName'
      },
      {
        title: '申请期数',
        key: 'applyTerms'
      },
      {
        title: '渠道',
        key: 'channelName'
      },
      {
        title: '工单处理人',
        key: 'assigneeName'
      },
      {
        title: '工单节点',
        key: 'curNodeName'
      },
      {
        title: '产品名称',
        key: 'productName'
      }
      ],
      successColumns: [{
        title: '身份证',
        key: 'idCardNo',
        width: 205
      },
      {
        title: '进件ID',
        key: 'loanId',
        width: 205
      },
      {
        title: '现工单处理人',
        key: 'assignee',
        width: 160
      },
      {
        title: '原工单处理人',
        key: 'preAssignee',
        width: 160
      }
      ],
      failColumns: [{
        title: '身份证',
        key: 'idCardNo',
        width: 200
      },
      {
        title: '进件ID',
        key: 'loanId',
        width: 180
      },
      {
        title: '工单处理人',
        key: 'assignee',
        width: 150
      },
      {
        title: '失败原因',
        key: 'message',
        width: 200
      }
      ],
      successData: [],
      failData: [],
      tabDatas: [

      ],
      total: 0,
      pageNum: 1,
      pageSize: 20,
      assignee: null,
      userName: null,
      users: [],
      tempUsers: [],
      selection: null,
      custNamePop: null,
      custLoanId: null
    }
  },
  methods: {
    handNodeChange () {
      var vm = this
      if (vm.curNodeCode && vm.curNodeCode !== '' && vm.curNodeCode != null) {
        this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/workgroup/service/selectUserListByNode', {
          nodeCode: vm.curNodeCode
        }).then(re => {
          var datas = re.data.data || []
          var userList = []
          datas.forEach(item => {
            var tData = {}
            tData.label = item.userName
            tData.value = item.userCode
            userList.push(tData)
          })
          vm.users = userList
        }).catch(er => {})
      } else {
        vm.users = vm.tempUsers
      }
    },
    asyncOK () {
      var isOver = false
      var params = {}
      params.loanCases = this.selection
      params.assignee = this.assignee
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanapplycase/service/transfersCase', params).then(re => {
        var data = re.data.data
        if (re.data.code === 'success') {
          this.$Message.success({
            title: '提示',
            content: '转件完成',
            onOk () {}
          })
          this.afterTransfer = true
          this.successData = data.successList
          this.failData = data.failList
        } else {
          this.$Message.warning({
            title: '提示',
            content: re.data.message,
            onOk () {}
          })
        }
        isOver = true
      }).catch(er => {
        isOver = true
        this.$Message.warning({
          title: '错误提示',
          content: '网络错误请稍后再试',
          onOk () {}
        })
      })
      setTimeout(() => {
        this.transfersModal = false
        if (isOver) {

        }
      }, 2000)
    },
    closeModal () {
      this.afterTransfer = false
      this.submitQuery(this.currentPage)
    },
    userCodeChange (selectUser) {
      this.userName = selectUser.label
    },
    checkChange (selection) {
      this.selection = selection
    },
    handleSelectChange () {
      this.userList = this.groupUsers[this.workGroupCode]
    },
    handlePageChange (goPage) {
      this.submitQuery(goPage)
    },
    submitQuery (goPage) {
      var params = {}
      if (parseFloat(goPage).toString() === 'NaN') {
        goPage = 1
      }
      params.pageNum = goPage
      params.workGroupCode = this.workGroupCode
      params.assignee = this.userCode
      params.loanId = this.loanId
      params.custName = this.custName
      params.custCardNo = this.custCardNo
      params.curNodeCode = this.curNodeCode
      params.productCode = this.productCode
      if ((this.startCreatedDate !== '')) {
        params.startCreatedDate = this.startCreatedDate
      }
      if ((this.endCreatedDate !== '')) {
        params.endCreatedDate = this.endCreatedDate
      }

      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanapplycase/service/transfers', params).then(re => {
        if (re.data.code === 'success') {
          this.tabDatas = []
          this.total = re.data.data.total
          this.pageSize = re.data.data.pageSize
          this.currentPage = re.data.data.pageNum
          var datas = re.data.data.list || []
          this.tabDatas = datas
        } else {
          this.$Message.warning({
            title: '提示',
            content: re.data.message,
            onOk () {}
          })
        }
      }).catch(er => {})
    },
    // 筛选条件展示
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/approvalManagement/approvalProcess/service/screeneCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.productList.push({
          productType: '',
          productTypeName: '请选择'
        })
        var productLength = 0
        for (; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
      }).catch(er => {

      })
    },
    submitTransfers () {
      if (this.selection == null) {
        this.$Message.error({
          title: '错误提示',
          content: '请选择需要转的件！',
          onOk () {}
        })
        return
      }
      if (this.assignee == null) {
        this.$Message.error({
          title: '错误提示',
          content: '请选择转给谁！',
          onOk () {}
        })
        return
      }
      this.transfersModal = true
    },
    initRoles () {
      this.treeData = []
      var tData = {}
      tData.title = '全部'
      tData.expand = true
      this.treeData.push(tData)
    },
    initRolesSelect () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/workgroup/service/selectDropDownDatas').then(re => {
        this.initRoles()
        if (re.data.code === 'success') {
          var datas = re.data.data || []
          var groupList = [] // 角色
          var users = {} // 角色下用户
          datas.groupList.forEach(item => {
            groupList.push({
              groupCode: item.groupCode,
              groupName: item.groupName
            })
            var userList = []
            var tData = {}
            tData.title = item.groupName
            tData.roleCode = item.groupCode
            tData.expand = false
            var userDatas = item.userNodes
            if (userDatas && userDatas.length > 0) {
              var tUsers = []
              userDatas.forEach(item => {
                var tUser = {}
                tUser.title = item.userName
                tUser.expand = false
                tUser.userCode = item.userCode
                tUsers.push(tUser)
                userList.push({
                  userCode: item.userCode,
                  userName: item.userName
                })
              })
              tData.children = tUsers
              users[item.groupCode] = userList
            }
            this.treeData.push(tData)
          })
          vm.groupList = groupList
          vm.groupUsers = users
          vm.nodeList = datas.nodeList
        } else {
          this.$Message.warning({
            title: '提示',
            content: re.data.message,
            onOk () {}
          })
        }
      }).catch(er => {})
    },
    cloneObject (obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    initSysUsers () {
      var params = {}
      var url = 'system/pmsn/service/userPageListByOrgCode/' + 1 + '/9999'
      this.$ajax.post(this.$appContext.marvels_core_system + url, params).then(re => {
        this.users = []
        if (re.data.code === 'success') {
          var datas = re.data.data.list || []
          datas.forEach(item => {
            var user = {}
            user.label = item.userNamep
            user.value = item.userCode
            // console.log(user);
            this.users.push(user)
          })
          this.tempUsers = this.cloneObject(this.users)
        } else {
          this.$Message.warning({
            title: '提示',
            content: re.data.message,
            onOk () {}
          })
        }
      }).catch(er => {})
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initSysUsers()
    this.initRolesSelect()
    this.screenConditon()
  }
}
</script>

<style lang="less">
.body_contail_div {
  background: #fff;
  padding: 5px;
}
</style>
